<template>
  <div class="text-bg-count">
    <div
      v-for="item in sourceArr"
      :key="item.name"
      class="text-bg-count-wrapper"
    >
      <div :class="[item.count ? '' : 'noCount']" class="count">
        {{ item.count ? item.count : '--' }}
      </div>
      <div class="name">{{ item.name }}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    sourceArr: {
      type: Array,
      default: () => [
        { name: '视频', count: '66' },
        { name: '图像', count: '66' },
        { name: '声音', count: '66' },
        { name: '位置', count: '66' },
        { name: '温湿度', count: '66' },
        { name: '大气', count: '' }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.text-bg-count {
  width: 400px;
  height: 139px;
  background: linear-gradient(
    180deg,
    rgba(222, 246, 251, 0.6) 0%,
    rgba(222, 246, 251, 0) 100%
  );
  border-radius: 16px 16px 16px 16px;
  opacity: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  .text-bg-count-wrapper {
    width: 133px;
    text-align: center;
    font-size: 18px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    .count {
      color: #3f8cff;
      font-weight: bold;
    }
    .name {
      color: #2b4054;
      font-weight: 400;
    }
    .noCount {
      color: #2b4054 !important;
    }
  }
}
</style>
